<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <link rel="stylesheet" href="layui-v2.7.6/layui/css/layui.css">
    <link rel="stylesheet" href="layui-v2.7.6/layui/css/public.css">
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>

        <script type="text/html" id="currentTableBar">
            <a id="1" class="layui-btn layui-btn-xs layui-btn-danger data-delete-btn" lay-event="add" style="background-color: #00f7de"> 添加 </a>
            <a id="2" class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="edit" style="background-color: yellow">编辑</a>
            <a id="3" class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete" style="background-color: pink">删除</a>
            <a id="4" class="layui-btn layui-btn-xs layui-btn-danger data-delete-btn" lay-event="detail" style="background-color: greenyellow"> 详细 </a>
        </script>

    </div>
</div>
<script src="layui-v2.7.6/layui/layui.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
    layui.use(['form', 'table','upload'], function () {
        var $ = layui.jquery,
            form = layui.form,
            upload=layui.upload,
            table = layui.table;
        //获取当前登录的用户的角色
        $.get("http://localhost:8080/api/user/detail.do",function (res){
            console.log(res.data.utype);
            var userPermissions = res.data.utype;
            // 如果需要，可以根据不同角色进行更多自定义
            // 例如，只有编辑员可以编辑
            // if (user.utype === 0) {
            //     $('#toolbar .data-count-edit').removeClass('layui-btn-disabled').css('background-color', 'orange'); // 编辑员可以编辑，更改颜色
            // }


        table.render({
            elem: '#currentTableId',
            url: 'http://localhost:8080/api/user/page.do',
            toolbar: '#toolbarDemo',
            defaultToolbar: ['filter', 'exports', 'print', {
                title: '提示',
                layEvent: 'LAYTABLE_TIPS',
                icon: 'layui-icon-tips'
            }],
            cols: [[
                {type: "checkbox", width: 50},
                {field: 'ucode',  title: '编号', sort: true},
                {field: 'uname', title: '用户'},
                // {field: 'umemo',  title: '手机号', sort: true},
                {field: 'upwd', title: '密码',templet:function (r){
                    return '******';
                    }},
                {field: 'utype',  title: '类型',templet:function (f){
                        if (f.utype == 1){
                            return "<span style='color:pink'>管理人员</span>";
                        }else{
                            return "<span style='color:greenyellow'>普通用户</span>";
                        }
                    }},
                {field: 'umemo', title: '备注'},
                {title: '操作111', minWidth: 300, align: "center",
                    templet: function(d){
                        // 判断是否显示按钮
                        if(userPermissions === 1){
                            return '<a id="1" class="layui-btn layui-btn-xs layui-btn-danger data-delete-btn" lay-event="add" style="background-color: #00f7de"> 添加 </a> <a id="2" class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="edit" style="background-color: yellow">编辑</a>           <a id="3" class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete" style="background-color: pink">删除</a> <a id="4" class="layui-btn layui-btn-xs layui-btn-danger data-delete-btn" lay-event="detail" style="background-color: greenyellow"> 详细 </a>';
                        }if(d.utype === 0){
                            return ' <a id="2" class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="edit" style="background-color: yellow">编辑</a>  <a id="4" class="layui-btn layui-btn-xs layui-btn-danger data-delete-btn" lay-event="detail" style="background-color: greenyellow"> 详细 </a>';
                        }
                        return ''; // 不显示按钮
                    }
                }
            ]],
            limits: [10, 15, 20, 25, 50, 100],
            limit: 15,
            page: true,
            skin: 'line'
        });

        })

        table.on('tool(currentTableFilter)', function (obj) {
            var data = obj.data;
            if (obj.event === 'edit') {
                //要修改的数据 存储
                localStorage.setItem("user",JSON.stringify(data));

                var index = layer.open({
                    title: '编辑用户',
                    type: 2,
                    shade: 0.2,
                    maxmin:true,
                    shadeClose: true,
                    area: ['100%', '100%'],
                    content: 'useredit.html',
                });
                $(window).on("resize", function () {
                    layer.full(index);
                });
                return false;
            } else if (obj.event === 'delete') {

                layer.confirm('真的删除么', function (index) {
                    //删除数据  假删除 请求接口 Ajax
                    $.post("http://localhost:8080/api/user/delete.do","id="+data.ucode,function (res){
                        if(res.code==0){
                            obj.del();
                            layer.close(index);
                        }else {
                            layer.msg("亲，网络故障，删除失败！");
                        }
                    })

                });
            } else if (obj.event === 'add') {
                var index = layer.open({
                    title: '添加用户',
                    type: 2,
                    shade: 0.2,
                    maxmin:true,
                    shadeClose: true,
                    area: ['100%', '100%'],
                    content: 'useradd.html',
                });
                $(window).on("resize", function () {
                    layer.full(index);
                });
            } else if (obj.event === 'detail') {
                //要修改的数据 存储
                localStorage.setItem("user",JSON.stringify(data));

                var index = layer.open({
                    title: '查看用户',
                    type: 2,
                    shade: 0.2,
                    maxmin:true,
                    shadeClose: true,
                    area: ['100%', '100%'],
                    content: 'userdetail.html',
                });
                $(window).on("resize", function () {
                    layer.full(index);
                });
                return false;
            }
        });

    });
</script>

</body>
</html>